<template>
  <div>
    <button @click="state.b += 1">+1</button>
  </div>
</template>

<script>
import { ref, reactive } from "@vue/composition-api";

export default {
  setup(props, ctx) {
    const count = ref(0);

    const state = reactive({
      /** ↓如果把一个ref包裹后的值作为reactive的对象的属性,也可以不用.value,会自动展开*/
      count // ← 注意没有 count: count.value 这样复制 而是直接count:count这样赋值了 因为会自动展开
    });

    console.log("state.count:", state.count); // 0
    state.count = 1;
    console.log("count.value:",count.value); // 1

    /** 如果把这个state.count又赋给了另外一个ref,那么旧的就会被这个新的ref替换掉,修改新的不会影响到旧的ref上 */
    const otherCount = ref(2);
    state.count = otherCount;
    console.log(state.count); // 2
    console.log(count.value); // 1

    /** 注意只有reactive(Object),ref作为Object属性的时候才会自动展开,而作为像Array、Map其它对象类型的成员则不会自动展开ref*/
    const arr = reactive([ref(0)]);
    // need .value here
    console.log(arr[0].value); // 0

    const map = reactive(new Map([['foo', ref(0)]]));
    // need .value here
    console.log(map.get('foo').value); // 0
    return {
      state
    };
  }
};
</script>

<style lang="scss" scoped></style>
